<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .container{
            width: 500px;
            border-radius: 10px;
            border: 1px solid red;
            margin: 50px auto;
            padding: 20px;
        }
        .usern{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="container">
<h1>模态窗口</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 登录
</button>
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请输入信息</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group usern">
                        <span class="input-group-addon glyphicon glyphicon-user" id="basic-addon4"></span>
                        <input type="text" class="form-control" placeholder="会员名/邮箱/手机号" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group usern">
                        <span class="input-group-addon glyphicon glyphicon-lock" id="basic-addon3"></span>
                        <input type="text" class="form-control" placeholder="请输入登录密码" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
    <div class="container">
        <span class="glyphicon-fire glyphicon glyphicon-eye-open" aria-hidden="true"></span>
        <input type="text" name="" id="">
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default" aria-label="Right Align">
            <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>
        <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            Enter a valid email address
        </div>
        <h1>下拉菜单</h1>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <h1>输入框组</h1>
        <div class="input-group usern">
            <span class="input-group-addon glyphicon glyphicon-user" id="basic-addon1"></span>
            <input type="text" class="form-control" placeholder="会员名/邮箱/手机号" aria-describedby="basic-addon1">
        </div>
        <div class="input-group usern">
            <span class="input-group-addon glyphicon glyphicon-lock" id="basic-addon2"></span>
            <input type="text" class="form-control" placeholder="请输入登录密码" aria-describedby="basic-addon1">
        </div>
        <h1>做为额外元素的按钮</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
                    <input type="text" class="form-control" placeholder="Search for...">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
    </div>
  <h1>按钮组</h1>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
    <h1>按钮工具栏</h1>
        <div class="btn-toolbar" role="toolbar" aria-label="...">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            <div class="btn-group" role="group" aria-label="..."></div>
        </div>
<script>
    /*组件
    图标
    下拉菜单
    输入框组
    按钮组

        */
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>